
<template>
  <el-icon ref="buttonRef" @click="show = !show" v-click-outside="onClickOutside">
    <ArrowUp v-if="show"/>
    <ArrowDown v-else />
  </el-icon>

  <el-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    placement="right-start"
    virtual-triggering
    :show-arrow="false"
  >
    <header>
      <VabInputForm />
    </header>
    <main v-infinite-scroll="load">
      <label class="el-checkbox"
        v-for="(item, i) in dataSource" :key="i"
        :class="{ 'is-checked': item.show }"
        @click="item.show = !item.show"
      >
        <span class="el-checkbox__input" :class="{ 'is-checked': item.show }">
          <span class="el-checkbox__inner"></span>
        </span>
        {{ item.value }}
      </label>

      <p v-if="loading" class="flex">
        <el-icon  class="el-select-loading__icon">
          <img class="loadingIcon" :src="loadingIcon" alt="" />
        </el-icon>
        加载中...
      </p>
      <p v-if="noMore">到底了...</p>
    </main>
    <footer>
      <VabButton title="确认" type="primary" @click="handleFifter()"/>
      <VabButton title="重置" @click="handleReset()"/>
    </footer>
  </el-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import { ossZjkUrl } from '~/src/config';

/***
* @prop
*/

const props = defineProps({
  keyword: {
    type: String,
    default: ''
  },
})

/***
* @var
*/
const buttonRef = ref()
const popoverRef = ref()
const show = ref(false) //弹出层显隐
const loading = ref(false) // 滚动底部加载更多
const noMore = ref(false) //加载全部 显示到底了...
const loadingIcon = ossZjkUrl + '/dms/image/loading.png'

const dataSource = ref([
  { show: false, value: '3793-0' },
  { show: false, value: '3793-1' },
  { show: false, value: '3793-2' },
  { show: false, value: '3793-3' },
  { show: false, value: '3793-4' },
  { show: false, value: '3793-5' },
  { show: false, value: '3793-6' },
  { show: false, value: '3793-7' },
  { show: false, value: '3793-8' },
  { show: false, value: '3793-9' },
])

/***
* @method
*/

watchEffect(async () => {
  if (show.value) {
    console.log(show.value, props.keyword);
  } else {
    console.log(show.value);
  }
})


const emit = defineEmits(['fifterTable'])

// 点击区域外
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
  show.value = false
}

// 筛选
const handleFifter = () => {
  emit('fifterTable', { prop: props.keyword, value: [] })
}
// 重置
const handleReset = () => {
  dataSource.value.forEach(item => {
    item.show = false
  })
}
// 滚到底部加载更多
const load = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}



</script>

<style lang="scss" scoped>
header {
  padding-bottom: 12px;
}

main {
  position: relative;
  border-bottom: 1px solid #dde0e7;
  max-height: 260px;
  overflow-y: auto;
  padding-bottom: 10px;

  :deep() {
    .el-checkbox__input {
      margin-right: 6px;
    }

    .el-checkbox {
      height: auto;
    }
  }

  .loadingIcon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}

footer {
  padding-top: 12px;

  span {
    margin-right: 4px;
    cursor: pointer;

    :last-child {
      margin-right: 0px;
    }
  }
}
</style>
